<template>
    <el-upload
        multiple
        :limit="limit"
        :file-list="uploadFileList"
        :headers="headers"
        :action="url"
        :accept="accept"
        :before-upload="beforeUpload"
        :disabled="disabled"
        :on-success="fileUploadSuccess"
        :on-remove="handleRemove"
        :on-exceed="onExceed"
        :on-progress="onProgress"
        list-type="text"
        class="comp-event-file-upload"
        :class="{ 'is-disabled': disabled || uploadFileList.length >= limit }"
    >
        <el-button class="upload-btn" icon="el-icon-upload2" size="small" :disabled="disabled || uploadFileList.length >= limit">点击上传</el-button>
        <template #file="{file}">
            <div :class="['content', file._status]">
                <div class="label">
                    <i class="iconfont icon-fujian"></i>
                    <span class="file-name">{{ file.fileName || file.name }}</span>
                </div>
                <div class="icon">
                    <i class="el-icon-circle-close error" v-if="file._status === 'error'"></i>
                    <i class="el-icon-circle-check success" v-else></i>
                </div>
                <div class="delete" @click="handleRemove(file)">
                    <span class="iconfont icon-AR-gaojingbiaoqian-guanbi"></span>
                </div>
            </div>
            <el-progress :show-text="false" v-show="file._status === 'loading'" :percentage="file.percentage" :stroke-width="2"></el-progress>
        </template>
    </el-upload>
</template>

<script>
import FileUploadMixin from './FileUploadMixin.js'
import FormValid from '@/components/form/FormValid'
export default {
    name: 'UploadFileList',
    mixins: [FileUploadMixin, FormValid],
    props: {
        value: String,
        parseValue: {
            type: Function,
            default: (value) => {
                return value.split(',').map((item) => ({ key: item }))
            }
        },
        onSuccess: {
            type: Function,
            default(response, file) {
                Object.assign(file, { key: response.data.id })
            }
        },
        formatValue: {
            type: Function,
            default: (files) => files.map((item) => item.key).join(',')
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.el-upload-list.el-upload-list--text {
    .el-upload-list__item {
        width: 100%;
        background: #ffffff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        padding: 0;
        margin-top: 6px !important;
        line-height: 32px;
        display: block;
        .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 12px;
            border-radius: 4px;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
            .label {
                display: flex;
                align-items: center;
                flex: 1;
                .file-name {
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .error {
                color: var(--theme);
            }
            .success {
                color: #52c41a;
            }
            .delete {
                display: none;
                cursor: pointer;
            }
            &:hover {
                .icon {
                    display: none;
                }
                .delete {
                    display: block;
                }
            }
        }
    }
}
.done:hover,
.error:hover {
    color: #ff6a6c;
}
.loading:hover {
    background-color: rgba(255, 106, 108, 0.1);
}
/deep/.el-upload-list.el-upload-list--text .el-progress {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    width: 100%;
}
</style>
